<template>
  <div class="front-layout">
    <!-- 头部导航栏 -->
    <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" background-color="#232946"
      text-color="#fff" active-text-color="#ffd700" :ellipsis="false">
      <!-- 网站logo -->
      <el-menu-item style="border: none; font-weight: bold; font-size: 20px;" index="/front">
        <img src="@/assets/logo.jpg" height="36px" style="vertical-align: middle; border-radius: 8px; margin-right: 10px; box-shadow: 0 2px 8px #0002;" />
        <span style="vertical-align: middle; letter-spacing: 2px;">{{ $sysTitle }}</span>
      </el-menu-item>
      <!-- 导航链接 -->
      <el-menu-item index="/front">首页</el-menu-item>
      <el-menu-item v-if="!token" index='/login'>登录</el-menu-item>
      <el-menu-item v-if="!token" index='/register'>注册</el-menu-item>
      <el-menu-item index="/front/notice">系统公告</el-menu-item>
      <el-menu-item index="/front/message">用户留言</el-menu-item>
      <el-menu-item index="/front/room">预约入住</el-menu-item>
      <!-- 用户菜单 -->
      <el-submenu v-if="token" index="#">
        <template slot="title">
          <el-avatar v-if="head" :src="$baseFileUrl+head" size="small" style="margin-right: 6px; border: 2px solid #ffd700;"/>
          <img v-else="head" src="@/assets/head.jpg" style="border-radius: 50%; width: 30px; height: 30px; margin-right: 6px; border: 2px solid #ffd700;" />
          <span>{{ user?.name }}</span>
        </template>
        <el-menu-item index="/front/userInfo">个人信息</el-menu-item>
        <el-menu-item index="/front/appointment">我的预约</el-menu-item>
        <el-menu-item index="/front/orders">我的入住</el-menu-item>
        <el-menu-item index="#" @click.native="logout">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
    <!-- 中间区域 -->
    <div class="content">
      <router-view />
    </div>
    <!-- 底部版权信息 -->
    <div class="footer">
      Copyright © {{ year }} {{ $sysTitle }}
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { removeToken } from '@/utils/auth'
export default {
  name: "Index",

  data() {
    return {
      activeIndex: "1",
      head: '',
      year: ''
    };
  },

  async mounted() {
    this.year = new Date().getFullYear();
    this.head = this.user?.head
  },

  computed: {
    ...mapState(['user', 'role', 'token'])
  },

  methods: {
    ...mapMutations(['setUser', 'setRole', 'setToken']),
    logout() {
      this.$confirm('确定退出吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeToken()
        this.setUser({})
        this.setToken('')
        this.$router.replace('/front')
      }).catch(() => { });
    },
    handleAppointmentClick() {
      this.$router.push('/front/room');
    }
  },
}
</script>

<style lang="less" scoped>
.front-layout {
  min-height: 100vh;
  background: linear-gradient(135deg, #232946 0%, #393e46 100%);
  display: flex;
  flex-direction: column;
}

.el-menu-demo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18);
  border-radius: 0 0 18px 18px;
  background: #232946 !important;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
}

/deep/ .el-menu.el-menu--horizontal {
  border-bottom: none !important;
  background: transparent !important;
}

.el-menu-item, /deep/ .el-menu--horizontal > .el-menu-item {
  font-size: 17px;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
  border-radius: 8px;
  margin: 0 6px;
  padding: 0 22px !important;
  height: 64px;
  line-height: 64px;
  color: #fff !important;
}

.el-menu-item:hover, /deep/ .el-menu--horizontal > .el-menu-item:hover {
  background: #2d3a4b !important;
  color: #ffd700 !important;
}

.el-menu-item.is-active, /deep/ .el-menu--horizontal > .el-menu-item.is-active {
  background: #232946 !important;
  color: #ffd700 !important;
  font-weight: bold;
}

/deep/ .el-submenu__title {
  font-size: 17px;
  font-weight: 500;
  border-radius: 8px;
  height: 64px;
  line-height: 64px;
  color: #fff !important;
}

.content {
  flex: 1;
  min-height: calc(100vh - 64px - 60px);
  padding-top: 74px;
  padding-bottom: 40px;
  background: linear-gradient(135deg, #232946 0%, #393e46 100%);
}

.footer {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #ffd700;
  background: linear-gradient(90deg, #232946 0%, #393e46 100%);
  font-size: 16px;
  letter-spacing: 1px;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -2px 12px 0 rgba(0,0,0,0.10);
  margin-top: 30px;
}

@media (max-width: 900px) {
  .el-menu-demo {
    padding: 0 6px;
    height: 54px;
  }
  .content {
    padding-top: 60px;
    padding-bottom: 16px;
  }
  .footer {
    font-size: 13px;
    height: 44px;
    line-height: 44px;
  }
}
</style>
